<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单查询</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" href="https://static.91haoka.cn/vant.css"/>
        <script src="https://static.91haoka.cn/vue.min.js"></script>
        <script src="https://static.91haoka.cn/vantall.js"></script>
        <script src="https://static.91haoka.cn/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://static.91haoka.cn/all.css"/>
     </head>
    <style type="text/css">
		*{ box-sizing: border-box; font-family:'PingFang SC'; font-size: 14px;}
		.p1{ background: #E7EEFF; border-radius: 0.4rem; padding: 0.3rem;}
		.p1 img{ width: 0.54rem;}
		.t1{ margin-top: 0.2rem; font-size: 0.28rem; color: #2D3038;}
		.btnx{ background: #FF3400; border-radius: 0.6rem; color: #fff; font-weight: bold; margin-top: 0.15rem; width: 1.7rem; padding: 0.2rem 0rem; text-align: center;}
		.p2 img{ width: 0.34rem;}
		.t2{ font-size: 0.22rem; margin-top: 0.05rem;}
		.li{ padding: 0.3rem 0; background: #fff; padding:0.2rem 0.4rem; margin-bottom: 0.2rem;}
		.act{ color: #FF3400;}
		
		.van-popup{ background: transparent;}
		.van-loading__text{ color: #FFFFFF;}
		
		.k1 {
			margin-bottom: 0.3rem;
		}
				
		.k3 {
			color: #FF6367;
			margin-bottom: 0.2rem;
		}
				
		.k2 {
			margin: 0.5rem 0;
		}
				
		.van-field {
			background: #FFFFFF;
		}
				
		.red {
			color: #FF6367;
			font-size: 0.28rem;
			margin: 0 0.05rem;
		}
				
		.inp {
			position: relative;
			margin-bottom: 0.3rem;
		}
				
		.inpa {
			position: absolute;
			right: 0.1rem;
			top: 7px;
			color: #FFFFFF;
			background: #FFB300;
			padding: 0 0.2rem;
		}
		.btn{
			background: #FFB300; color: #FFFFFF;
			padding: 0.2rem 0.6rem; border-radius: 3px; text-align: center; font-weight: bold; font-size: 0.3rem;
		}
		.btn2{
			background: #FFB300; color: #FFFFFF; width: 2rem;
			padding: 0.1rem 0.3rem; border-radius: 3px; text-align: center; font-weight: bold; font-size: 0.25rem;
		}
    </style>
	<body>
        <div id="app" style="background: #F1F1F1; min-height: 100vh;" v-cloak>
			<div v-if="!jieguo" class=" btn" style="position: fixed; right: 0rem; bottom: 0rem; z-index: 99; width: 100%; font-size: 14px; padding:0.2rem 0.2rem;" @click="genghuan">更换手机号</div>
			<div class="list" style="padding-bottom: 1rem;">
				<div style="padding: 0.4rem;" v-if="jieguo">
						
					<div class="inp">
						<van-field v-model="all.mobile" placeholder="请输入手机号" />
					</div>
					<div class="inp">
						<van-field v-model="all.id_card_num" placeholder="请输入购卡者身份证号" />
					</div>
					<!-- <div class="inp">
						<van-field v-model="all.code" placeholder="请输入验证码" ></van-field>
						<van-button class="inpa" size="small" @click="getcode" :disabled="use">{{countname}}</van-button>
					</div> -->
					<div class="k2 btn" @click="chaxun">查询订单</div>
					
					
					
				</div>
				
				<div v-if="!jieguo && list == ''" style="width: 100vw; height: 100vh;" class="flexcc" style="color: #666666; font-size: 0.35rem;">
					本手机号下面没有订单
				</div>
				<div class="li" v-for="item in list" :key='item.id'>
					<div class="flexb" style="font-weight: bold; margin-bottom: 0.2rem;">
						<div style="color: #666;">订单号：{{item.source_id}}</div>

						 <div style="color: #f00;" v-if="item.pay_status == 0">待支付</div>
						 <div style="color: #f00;" v-if="item.pay_status == 1">已支付</div>
						 <div style="color: #f00;" v-if="item.pay_status == 2">已取消</div>
						 <div style="color: #f00;" v-if="item.pay_status == 3">已超时</div>
						 <div style="color: #f00;" v-if="item.pay_status == 4">已核销</div>
						 <div style="color: #f00;" v-if="item.pay_status == 5">退款中</div>
						 <div style="color: #f00;" v-if="item.pay_status == 6">已退款</div>
						 <div style="color: #f00;" v-if="item.pay_status == 7">退款失败</div>

					</div>
					<div class="flex">
						<div><img :src="item.img" style="width: 2rem;"></div>
						<div style="margin-left: 0.4rem; flex-grow: 1; font-weight: bold; line-height: 0.5rem; width: 3.5rem;">
							<div style="color: #666;">{{item.sale_name}}</div>
							
							<!-- <el-option label="初步审核" value="120"></el-option>
							<el-option label="待完善证件信息" value="150"></el-option>
							<el-option label="待审核" value="200"></el-option>
							<el-option label="待开卡" value="450"></el-option>
							<el-option label="已领取" value="460"></el-option>
							<el-option label="开卡中" value="470"></el-option>
							<el-option label="待发货" value="500"></el-option>
							<el-option label="已发货" value="550"></el-option>
							<el-option label="已退货" value="-700"></el-option>
							<el-option label="已激活" value="5000"></el-option>
							<el-option label="开卡失败" value="-460"></el-option>
							<el-option label="证件不合格待重传" value="-200"></el-option>
							<el-option label="订单终止" value="0"></el-option> -->
							<div style="color: #f00;" v-if="item.status == 0">订单状态：订单终止</div>
							<div style="color: #f00;" v-if="item.status == -460">订单状态：开卡失败</div>
							<div style="color: #f00;" v-if="item.status == 200">订单状态：待审核</div>
							<div style="color: #f00;" v-if="item.status == 450">订单状态：待开卡</div>
							<div style="color: #f00;" v-if="item.status == 460">订单状态：已领取</div>
							<div style="color: #f00;" v-if="item.status == 470">订单状态：开卡中</div>
							<div style="color: #f00;" v-if="item.status == 500">订单状态：待发货</div>
							<div style="color: #f00;" v-if="item.status == 550">订单状态：已发货</div>
													
							<div style="color: #666;">订单金额：￥{{item.total}}元</div>
							<div style="color: #f00;" v-if="item.refund_status == 400">拒绝退款：{{item.buyer_memo}}</div>
							<div style="color: #666;">物流单号：{{item.tracking_number}}</div>
							<div style="color: #666;">物流公司：{{item.tracking_company}}</div>
							
							<div class="btn2" style="line-height: 0.3rem; float: right;" v-if="item.pay_status == 1" @click="tuikuan(item.id)">申请退款</div>
						</div>
					</div>
					
				</div>
				
			</div>
			<!-- <div class="fixed" style="bottom: 0; background: #fff; ">
				<div class="flexb" style=" padding: 0.15rem 0rem; text-align: center;">
					<div style="flex: 1;" @click="go('index.html?shop=127837')">
						<div class="p2 flexcc"><img src="img/i44.png"></div>
						<div class="t2 ">主页</div>
					</div>
					<div style="flex: 1;" @click="go('kefu.html')">
						<div class="p2 flexcc"><img src="img/i5.png"></div>
						<div class="t2 ">在线客服</div>
					</div>
					<div style="flex: 1;" @click="go2">
						<div class="p2 flexcc"><img src="img/i66.png"></div>
						<div class="t2 act">订单查询</div>
					</div>
				</div>
			</div> -->
        </div>

       
        <script>
            var h = document.documentElement.clientWidth / 7.5 + 'px';
                document.documentElement.style.fontSize = h;

            
            new Vue({
                el: '#app',
                data: function() {
                	return {
                       all: {
                       	mobile:"",
                       	id_card_num:""
                       },
                       countname:"获取验证码",
                       count:30,
                       use:false,
                       person:"",
                       ing:false,
					   list:"",
					   jieguo:true,
					   apis:""
                	}
                },
                created(){
					document.title = localStorage.getItem('title')
					if(location.href.includes('local')){
						this.apis = '/apis'
					}
                   if(localStorage.getItem('mobile')&&localStorage.getItem('id_card_num')){
					this.all.mobile = localStorage.getItem('mobile')
					this.all.id_card_num = localStorage.getItem('id_card_num')
                   	this.jieguo = false
                   	axios.get(`${this.apis}/api/my/orders?mobile=${localStorage.getItem('mobile')}&id_card_num=${localStorage.getItem('id_card_num')}`)
                   		.then(response => {
                   			if(response.data.msg.code == 0){
                   				let list = response.data.data
                   				let list2 = []
                   				let ids = []
                   				list.forEach(item=>{
                   					console.log(ids.includes(item.id))
                   					if(!ids.includes(item.id)){
                   						ids.push(item.id)
                   						list2.push(item)
                   					}else{
                   						
                   					}
                   				})
                   				this.list = list2
                   			}else{
                   				vant.Toast(response.data.msg.info);
                   			}
                   		})
                   }else{
                   	
                   }
                },
                mounted () {
                   
                },
                methods:{
					genghuan:function(){
						this.jieguo = !this.jieguo
						this.all.mobile = ''
						this.all.id_card_num = ''
						this.list = ''
					},
					
					tuikuan:function(id){
						axios.post(`${this.apis}/api/order/apply/refund`,{id:id,mobile:localStorage.getItem('mobile')})
							.then(response => {
								if(response.data.msg.code == 0){
									vant.Toast('已发起退款申请');
									
									this.chaxun()
										
								}else{
									vant.Toast(response.data.msg.info);
								}
							})
					},
					chaxun:function(){
						
						axios.get(`${this.apis}/api/my/orders`,{params:this.all})
							.then(response => {
								if(response.data.msg.code == 0){
									localStorage.setItem('mobile',this.all.mobile)
									localStorage.setItem('id_card_num',this.all.id_card_num)
									this.jieguo = false
									let list = response.data.data
									let list2 = []
									let ids = []
									list.forEach(item=>{
										console.log(ids.includes(item.id))
										if(!ids.includes(item.id)){
											ids.push(item.id)
											list2.push(item)
										}else{
											
										}
									})
									this.list = list2
								}else{
									vant.Toast(response.data.msg.info);
								}
							})
					},
					daojishi:function(){
						if(this.all.phone == ''){
							return false
						}
						this.use = true
						this.dao = setInterval(()=>{
							if(this.count > 0){
								this.count --
								this.countname = this.count + '秒后重新获取'
							}else{
								this.count = 30
								this.countname = '获取验证码'
								clearInterval(this.dao)
								this.use = false
							}
						},1000)
					},
					getcode:function(){
						axios.post(`${this.apis}/api/system/code/send`,{mobile:this.all.phone,share_id:127837})
							.then(response => {
								if(response.data.msg.code == 0){
									this.$toast('验证码已发送');
									this.daojishi()
								}else{
									vant.Toast(response.data.msg.info);
								}
							})
					},
					
                    go:function(url){
                    	window.location.href = url
                    },
					go2:function(){
						window.location.href = 'chadan.html'
					},
					go3:function(){
						window.location.href = 'https://work.weixin.qq.com/kfid/kfc3e3ac50ca14e6ef8'
					}
					
                }
            });

  
        </script>
	</body>
</html>
